<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>行内样式绑定示例</title>
</head>
<body>
  <div id="app">
    <p :style="{ color: textColor, fontSize: fontSize + 'px' }">
      这段文字的颜色和大小会根据下面的按钮改变
    </p>
    <button @click="changeStyle">切换样式</button>
  </div>

  <script src="../../../js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        // 初始状态的文字颜色和字体大小
        textColor: 'blue',
        fontSize: 16
      },
      methods: {
        changeStyle: function() {
          // 模拟换衣服：切换颜色和字体大小
          this.textColor = this.textColor === 'blue' ? 'red' : 'blue';
          this.fontSize = this.fontSize === 16 ? 24 : 16;
        }
      }
    });
  </script>
</body>
</html>